<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>京苏易购电子商务</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="../adminlte/plugins/fontawesome-free/css/all.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">


    <link rel="stylesheet" href="../adminlte/plugins/select2/css/select2.min.css">
    <!-- DataTables -->
    <link rel="stylesheet" href="../adminlte/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="../adminlte/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../adminlte/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->

    <link rel="stylesheet" href="../adminlte/css/SourceSans.css">

</head>


<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <a href="index3.html" class="brand-link">
            <img src="../adminlte/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
                 style="opacity: .8">
            <span class="brand-text font-weight-light">帷易胜(JD)商品管理</span>
        </a>

        <!-- Sidebar -->
        <div class="sidebar">
            <div th:replace="/common/sidebar :: common_side('../', 'productimage')"></div>
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-left">
                            <li class="breadcrumb-item"><a href="#">主页</a></li>
                            <li class="breadcrumb-item active"><a href="../productimage">商品图片</a></li>
                            <li class="breadcrumb-item active"><span th:text="${productInfo.getWareName()} "></span></li>
                        </ol>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class="content">

            <!-- Default box -->
            <div class="card">
                <div class="card-header">
                    <!--<h3 class="card-title">Projects</h3>-->

                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
                            <i class="fas fa-minus"></i></button>
                        <button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="Remove">
                            <i class="fas fa-times"></i></button>
                    </div>

                    <div class="card-body box-profile">
                        <!--<div class="text-center">-->
                            <!--<img class="profile-user-img img-fluid img-circle" src="../../adminlte/img/user4-128x128.jpg" alt="User profile picture">-->
                        <!--</div>-->

                        <h3 class="profile-username text-center" th:text="${productInfo.getWareName()}"></h3>

                        <p class="text-muted text-center" th:text="${productInfo.getWareId()}"></p>

                        <ul class="list-group list-group-unbordered mb-3">
                            <li class="list-group-item">
                                <b>品牌</b> <a class="float-right" th:text="${productInfo.getBrandName()}"></a>
                            </li>
                            <li class="list-group-item">
                                <b>类目</b> <a class="float-right" th:text="${productInfo.getCategoryName()}"></a>
                            </li>
                            <li class="list-group-item">
                                <b>状态</b>
                                <a class="float-right" th:if="${productInfo.getSaleState() eq 0}" >下柜</a>
                                <a class="float-right" th:if="${productInfo.getSaleState() eq 1}" >上柜</a>
                                <a class="float-right" th:if="${productInfo.getSaleState() eq 2}" >可上柜</a>
                            </li>
                            <li class="list-group-item">
                                <b>主图</b>

                                <a class="float-right" th:if="${productInfo.getIsPrimary() eq 1}">有主图</a>
                                <a class="float-right" th:if="${productInfo.getIsPrimary() eq 0}">无主图</a>

                            </li>


                            <li class="list-group-item">
                                <span style="padding: 1rem 0" th:text="'提交时间: ' + ${productInfo.getSubmitTime()==null ? '' : productInfo.getSubmitTime() }">主图</span>
                                <br>
                                <span  style="padding: 1rem 0"  th:text="'提交结果' + ${productInfo.getMessage()}">主图</span>
                            </li>
                        </ul>

                        <!--<a href="#" class="btn btn-primary btn-block"><b>Follow</b></a>-->
                    </div>

                </div>
                <div class="card-body p-0">
                    <table class="table table-striped projects">
                        <thead>
                        <tr>
                            <th style="width: 1%">
                                #
                            </th>
                            <th style="width: 10%">
                                编码
                            </th>
                            <th style="width: 20%">
                                名称
                            </th>
                            <th style="width: 20%">
                                商品图片
                            </th>
                            <th> kk</th>
                            <th>
                                类型
                            </th>
                            <th>
                                货号
                            </th>

                            <th></th>
                        </tr>
                        </thead>
                        <tbody>

                        <tr th:each="sku, stat : ${skus}">
                            <td th:text="${stat.count}"></td>
                            <td>
                                <a th:text="${sku.getSkuId()}">
                                    AdminLTE v3
                                </a>
                                <!--<br/>-->
                                <!--<small>-->
                                    <!--Created 01.01.2019-->
                                <!--</small>-->
                            </td>
                            <td>
                                <a th:text="${sku.getSkuName()}">
                                    AdminLTE v3
                                </a>
                            </td>
                            <td>
                                <ul class="list-inline">
                                    <li class="list-inline-item">
                                        <img alt="Avatar" th:if="${sku.getUrl() != null}" th:src="'http://img30.360buyimg.com/n4/' + ${sku.getUrl()}">
                                    </li>
                                </ul>
                            </td>

                            <td>
                                <a target="_blank" th:href=" 'http://img30.360buyimg.com/vc/'  + ${sku.getUrl()}"  th:text="${sku.getUrl()}"> </a>
                            </td>
                            <td class="project_progress">

                                <a th:if="${sku.getType() == '1' }">方图</a>
                                <a th:if="${sku.getType() == '2' }">透明图</a>
                                <a th:if="${sku.getType() == '3' }">长图</a>

                            </td>

                            <td>
                                <a target="_blank" th:href=" 'https://www.mymro.cn/u-' + ${sku.getItemNum()} + '.html'"  th:text="${sku.getItemNum()}">
                                    AdminLTE v3
                                </a>
                            </td>

                            <td class="project-actions text-right">

                                <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-default" th:sku="${sku.getSkuId()}" onclick="pic1(this)">
                                    添加主图
                                </button>
                                <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-primary" th:sku="${sku.getSkuId()}" onclick="pic2(this)">
                                    添加透明图
                                </button>
                                <button type="button"   th:if="${sku.getId() != null}" class="btn btn-default" th:pid="${sku.getId()}" onclick="deletePic(this)">
                                    删除图片
                                </button>
                            </td>
                        </tr>

                        </tbody>
                    </table>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->

        </section>
        <!-- /.content -->
    </div>

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->

    <div class="modal fade" id="modal-default">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">添加主图</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <form role="form"  enctype="multipart/form-data" id="form1" action="upload" method="post">
                <div class="modal-body">
                        <input type="hidden" class="custom-file-input" name="skuid" >
                        <input type="hidden" class="custom-file-input" name="type" value="1" >
                        <div class="card-body">
                            <div class="form-group">
                                <label for="pic1">主图</label>
                                <div class="input-group">
                                    <div class="custom-file">
                                        <input type="file" name="file" id="pic1">
                                        <label class="custom-file-label" for="pic1">选择主图</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                    <button type="submit" class="btn btn-primary">确 定</button>
                </div>

                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="modal-primary">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">添加透明图</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <form role="form" id="form2" enctype="multipart/form-data"  action="upload" method="post">
                <div class="modal-body">
                        <input type="hidden" class="custom-file-input" name="skuid" >
                        <input type="hidden" class="custom-file-input" name="type" value="2" >
                        <div class="card-body">
                            <div class="form-group">
                                <label for="pic2">透明图</label>
                                <div class="input-group">
                                    <div class="custom-file">
                                        <input type="file" class="custom-file-input" name="file" id="pic2">
                                        <label class="custom-file-label" for="pic2">选择透明图</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                    <button type="submit" class="btn btn-primary">确 定</button>

                </div>

                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="../adminlte/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- DataTables -->
<script src="../adminlte/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../adminlte/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="../adminlte/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="../adminlte/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<script src="../adminlte/plugins/select2/js/select2.full.min.js"></script>

<script src="../adminlte/plugins/bs-custom-file-input/bs-custom-file-input.min.js"></script>

<!-- page script -->
<script>

    $(document).ready(function (){
        bsCustomFileInput.init();
    });
    
    
    function pic1(e) {


        $("#form1").find("input[name='skuid']").val($(e).attr("sku"));

    }
    
    function pic2(e) {


        $("#form2").find("input[name='skuid']").val($(e).attr("sku"));

    }

    function deletePic(e) {

        ;

        $.ajax({
            type: 'POST',
            url: "picdelete",
            data: {id: $(e).attr("pid")},
            success: function (result) {

                if ( !!result && !!result.msg ) {
                    alert(result.msg);
                } else {
                    alert("删除成功");
                }

                window.location.reload();
            },
            dataType: "json"
        });

    }



    
</script>
</body>
</html>
